<template>
  <div class="art_show">
    <ul>
      <li v-for="v in arts">
        <div class="img">
          <img :src="v.src" alt="">
        </div>
        <div class="art_info">
          <div class="price">{{v.price}}</div>
          <p><span class="author">{{v.author}}</span> <span class="name">{{v.name}}</span></p>
          <p><span class="oldP"><s>{{v.oldP}}</s></span><span class="newP">{{v.newP}}</span></p>
        </div>
      </li>
    </ul>
  </div>
</template>
<script>
export default{
  props: ['arts'],
  name: 'Art_show'
}
</script>
<style scoped lang="less">
  .art_show{
    ul{
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      li{
        width: 48%;
        // border: 1px solid red;
        .img{
          height: 160px;
          width: 100%;
          overflow: hidden;
          img{
            width: 100%;
            height: 100%;
          }
        }
        .art_info{
          padding-right: 5px;
          margin: 0 0 20px;
          .price{
            text-align: right;
            font-size: 0.9em;
            margin: 4px 0;
          }
          p{
            margin: 0;
            font-size: 0.8em;
            text-align: right;
            color: #666;
          }
          span.newP{
            color: #f00;
            font-weight: bold;
          }
        }
      }
    }
  }
</style>